<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>炫酷随机点名</title>
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		body{
			background:white;
		}
		.box{
			width:710px;
			height:600px;
			border: 1px solid white;
			margin:0 auto;
			position:relative;
		}
		.box div{
			width:130px;
			height:40px;
			background:orangered;
			font-size:30px;
			line-height:40px;
			text-align:center;
			color:white;
			float:left;
			margin:20px;
			cursor:pointer;
		}
		p{
			width:200px;
			height:80px;
			font-size:50px;
			line-height:80px;
			text-align:center;
			position:absolute;
			bottom:20px;
			left:50%;
			margin-left:-100px;
			color:white;
			background:red;
			cursor:pointer;
		}
		.choose{
			background:white;
			color:blueviolet;
		}
	</style>
<body>
	<div class='box'>
		<div>关羽</div>
		<div>张飞</div>
		<div>刘备</div>
		<div>猪八戒</div>
		<div>如来</div>
		<div>观音</div>
		<div>孙悟空</div>
		<div>曹操</div>
		<div>王昭君</div>
		<div>赵云</div>
		<div>后裔</div>
		<div>鲁班</div>
		<div>钟馗</div>
		<div>钟无艳</div>
		<div>典韦</div>
		<div>不知火舞</div>
		<div>橘右京</div>
		<div>铠甲勇士</div>
		<div>奥特曼</div>
		<div>古天乐</div>
		<div>特朗普</div>
		<div>朱艳</div>
		<div>葫芦娃</div>
		<div>天线宝宝</div>
		<p class="but">开始点名</p>
	</div>
</body>
</html>
<script type="text/javascript">
$(function() {
    var j = 0;
    $(document).on('selectstart', function() {
        return false
    })
    var timer,
        n = 0
    $('.box p').on('click', function() {
        if (j == 0) {
            j = 1;
            $(".but").html("点名中");
            timer = setInterval(function() {
                n++

                $('.box div').each(function(k, v) {

                    $('.box div').eq(k).css({
                        'background': color(),
                        'color': color()
                    })
                })
                console.log(n)
                if (n >= 20) {

                    clearInterval(timer)
                    j = 0;
                    $(".but").html("开始点名");
                    n = 0
                    $('.box div').css({
                        'background': 'orangered',
                        'color': 'white'
                    })
                    $('.box div').eq(name()).css({
                        'background': 'yellow',
                        'color': 'white'
                    })
                }
            }, 100)
        }




    })

    /*随机索引号，需要改的就直接改数字，多少人就改成多少个*/
    function name() {
        return Math.floor(Math.random() * 24)
    }
    /*随机的颜色封装函数*/
    function color() {
        var r = Math.floor(Math.random() * 256)
        var g = Math.floor(Math.random() * 256)
        var b = Math.floor(Math.random() * 256)
        return 'rgb(' + r + ',' + g + ',' + b + ')'
    }
})
</script>